<template>
  <div class="login">
    <div class="card">
      <!-- :model="ruleForm" 是绑定我们form表单中需要提交给后台的一个对象 -->
      <!-- :rules="rules" 是动态绑定的rules，表单验证规则 -->
      <!-- ref="ruleForm"  是我们绑定的对象 -->
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        :label-position="labelPosition"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm myfrom"
      >
        <h4>欢迎光临智能家政服务平台</h4>
        <el-form-item class="my-el-form-item" label="用户名" prop="username">
          <!-- clearable 显示后面x的图标（清空功能） -->
         <!-- v-model 和date -->

          <el-input type="text" clearable v-model="ruleForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item class="my-el-form-item" label="密码" prop="password">
          <el-input type="password" show-password v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="验证码" prop="code">
          <el-input clearable v-model="ruleForm.code" maxlength="5">
            <template #append>
              <el-button @click="getCaptcha">刷新验证码</el-button>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item v-show="showElImage">
          <el-image
            style=" width: 158px;height: 42px;"
            :src="captchaImg"
            class="captchaImg"
            @click="getCaptcha"
          ></el-image>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>

          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
        <el-form-item>
          <router-link
            to="/home"
            class="btn btn-outline-primary"
            style="margin-right:5px;"
            tag="button"
          >回到首页</router-link>
          <router-link to="/register" tag="button" class="btn btn-outline-primary">没有账号？请注册</router-link>
        </el-form-item>
        <el-form-item></el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import qs from 'qs'

export default {
  data() {
    return {
      labelPosition: 'top',
      showElImage: false,
      ruleForm: {
        username: '',
        password: '',
        code: '',
        token: '',
      },
      rules: {
        username: [
          //trigger: 'blur'失去焦点的时候判断请求
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur',
          },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur',
          },
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 5, max: 5, message: '长度为 5 个字符', trigger: 'blur' },
        ],
      },
      captchaImg: null,
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const data = await this.$http.post(
            '/login?username=' +
              this.ruleForm.username +
              '&password=' +
              this.ruleForm.password +
              '&token=' +
              this.ruleForm.token +
              '&code=' +
              this.ruleForm.code
          )
          console.log(data.data.code)
          if (data.data.code != 200) {
            this.$refs[formName].resetFields()
            this.$message.error(data.data.msg)
          } else {
            this.$message.success('登录成功！')
            const jwt = data.headers['authorization']
            this.getUser()
            this.$store.commit('setToken', jwt)
            this.$router.push('/home')
          }
        }
      })
    },

    //重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    async getCaptcha() {
      const res = await this.$http.get('/captcha')
      this.ruleForm.token = res.data.data.token
      this.captchaImg = res.data.data.captchaImg
      this.ruleForm.code = ''
      this.showElImage = true
    },
    getUser() {
      this.$http.get('/sys/userInfo').then((res) => {
        this.userInfo = res.data.data.data
        this.$store.commit('setUserInfo', res.data.data)
      })
    },
  },
  created() {
    this.getCaptcha()
  },
}
</script>

<style lang="less" scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  //center center no-repeat
  background: url('~@/assets/imags/login/login.jpeg') no-repeat;
  background-size: cover;
}
.card {
  width: 25rem;

  background: rgba(255, 255, 255, 0.35);
}

.el-form {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 50px;
}

.el-message {
  top: 200px !important;
}

.captchaImg {
  float: left;
  margin-left: 8px;
  border-radius: 4px;
}
h1 {
  letter-spacing: 9px;

  margin-top: 10px;
  color: #0a1b4f;
}
.btn-outline-primary {
  color: #fff !important;
}
.el-input--suffix {
  width: 220px !important;
}
.el-form-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.el-form-item__content {
  display: flex !important;
}
</style>
